
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文本域还可以输入多少字</title>
    <style>
        #comment textarea{height:100px;}
        #comment p span{color:red;}
    </style>
    <script src="js/jquery-1.7.1.min.js" ></script>
</head>

<body>
<div id="comment">
    <textarea></textarea>
    <p>你还可以输入<span>300</span>个字</p>
</div>
<script>
    $(function(){
        $(' #comment textarea ').keyup(function(){
            //输入字符后键盘up时触发事件
            var txtLeng = $(' #comment textarea ').val().length;      //把输入字符的长度赋给txtLeng
//拿输入的值做判断
            if( txtLeng>300 ){
//输入长度大于300时span显示0
                $(' #comment p span ').text(' 0 ');
//截取输入内容的前300个字符，赋给fontsize
                var fontsize = $('#comment textarea').val().substring(0,300);
//显示到textarea上
                $(' #comment textarea ').val( fontsize );
            }else{
//输入长度小于300时span显示300减去长度
                $('#comment p span').text(300-txtLeng);
            }
        });
    });
</script>
</body>